```html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>深入理解JWT - JSON Web Token完全指南</title>
    <link href="https://cdn.staticfile.org/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
    <link href="https://cdn.staticfile.org/tailwindcss/2.2.19/tailwind.min.css" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;500;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/mermaid@latest/dist/mermaid.min.js"></script>
    <style>
        body {
            font-family: 'Noto Sans SC', Tahoma, Arial, Roboto, "Droid Sans", "Helvetica Neue", "Droid Sans Fallback", "Heiti SC", "Hiragino Sans GB", Simsun, sans-serif;
            color: #333;
            line-height: 1.8;
        }
        h1, h2, h3, h4 {
            font-family: 'Noto Serif SC', serif;
            font-weight: 600;
        }
        .hero-gradient {
            background: linear-gradient(135deg, #6e8efb 0%, #a777e3 100%);
        }
        .code-block {
            background-color: #2d2d2d;
            color: #f8f8f2;
            border-radius: 8px;
            padding: 1.5rem;
            font-family: 'Courier New', monospace;
            position: relative;
            overflow-x: auto;
        }
        .code-block pre {
            margin: 0;
        }
        .code-block::before {
            content: "";
            position: absolute;
            top: 0;
            right: 0;
            width: 100%;
            height: 40px;
            background: rgba(255,255,255,0.1);
            border-top-left-radius: 8px;
            border-top-right-radius: 8px;
        }
        .card-hover:hover {
            transform: translateY(-5px);
            box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
        }
        .jwt-part {
            position: relative;
            padding: 1.5rem;
            border-radius: 8px;
            transition: all 0.3s ease;
        }
        .jwt-part:hover {
            transform: translateY(-3px);
        }
        .jwt-part-header {
            background-color: rgba(110, 142, 251, 0.1);
            border-left: 4px solid #6e8efb;
        }
        .jwt-part-payload {
            background-color: rgba(167, 119, 227, 0.1);
            border-left: 4px solid #a777e3;
        }
        .jwt-part-signature {
            background-color: rgba(76, 209, 55, 0.1);
            border-left: 4px solid #4cd137;
        }
        .feature-card {
            transition: all 0.3s ease;
            border-radius: 12px;
            overflow: hidden;
        }
        .feature-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
        }
        .feature-icon {
            width: 60px;
            height: 60px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 1.5rem;
        }
        .mermaid {
            background-color: white;
            padding: 1.5rem;
            border-radius: 12px;
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
        }
    </style>
</head>
<body class="bg-gray-50">
    <!-- Hero Section -->
    <section class="hero-gradient text-white py-20 px-4 sm:px-6 lg:px-8">
        <div class="max-w-4xl mx-auto">
            <div class="flex flex-col md:flex-row items-center">
                <div class="md:w-1/2 mb-10 md:mb-0">
                    <h1 class="text-4xl md:text-5xl font-bold mb-6 leading-tight">深入理解JWT</h1>
                    <p class="text-xl mb-8 opacity-90">JSON Web Token在现代Web开发中的全面指南</p>
                    <div class="flex space-x-4">
                        <a href="#intro" class="bg-white text-indigo-600 px-6 py-3 rounded-lg font-medium hover:bg-opacity-90 transition duration-300">
                            <i class="fas fa-book-open mr-2"></i>开始阅读
                        </a>
                        <a href="#structure" class="bg-indigo-700 text-white px-6 py-3 rounded-lg font-medium hover:bg-indigo-800 transition duration-300">
                            <i class="fas fa-code mr-2"></i>查看结构
                        </a>
                    </div>
                </div>
                <div class="md:w-1/2 flex justify-center">
                    <img src="https://cdn.nlark.com/yuque/0/2024/png/21449790/1718792605311-29632147-a70a-4c06-b4a5-43d36cf3b73f.png" alt="JWT Illustration" class="rounded-xl shadow-xl w-full max-w-md">
                </div>
            </div>
        </div>
    </section>

    <!-- Introduction Section -->
    <section id="intro" class="py-16 px-4 sm:px-6 lg:px-8 bg-white">
        <div class="max-w-4xl mx-auto">
            <div class="mb-12">
                <h2 class="text-3xl font-bold mb-6 text-gray-800 border-b-2 border-indigo-100 pb-4">JWT简介</h2>
                <p class="text-lg text-gray-700 mb-8">
                    JWT（JSON Web Token）是一种开放标准（RFC 7519），它定义了一种紧凑且自包含的方式，用于在各方之间安全地传输信息作为JSON对象。该信息可以被验证和信任，因为它经过数字签名。JWT的设计初衷是用于网络应用环境中的信息传输，在身份认证和授权方面有广泛的应用。
                </p>
                <div class="grid md:grid-cols-2 gap-6">
                    <div class="bg-gray-50 p-6 rounded-xl">
                        <h3 class="text-xl font-semibold mb-4 text-indigo-600"><i class="fas fa-shield-alt mr-2"></i>为什么选择JWT？</h3>
                        <p class="text-gray-700">
                            在传统的身份验证中，我们通常依赖于服务器端的会话管理，这意味着每次用户请求时，服务器都会查询会话数据，这不仅增加了服务器负载，还限制了系统的可扩展性。而JWT的出现改变了这一切。
                        </p>
                    </div>
                    <div class="bg-gray-50 p-6 rounded-xl">
                        <h3 class="text-xl font-semibold mb-4 text-purple-600"><i class="fas fa-bolt mr-2"></i>JWT的优势</h3>
                        <p class="text-gray-700">
                            JWT是一种紧凑、安全的方式，用于在各方之间传递JSON对象。它强调了身份验证和信息交换。JWT是无状态的，服务器不需要存储会话信息，这使得它特别适合分布式系统和微服务架构。
                        </p>
                    </div>
                </div>
            </div>

            <img src="https://cdn.nlark.com/yuque/0/2024/png/21449790/1718792641189-65966739-3927-4cdc-9eaf-24426308f083.png" alt="JWT Flow" class="w-full rounded-lg shadow-md mb-12">

            <div>
                <h3 class="text-2xl font-bold mb-6 text-gray-800">JWT的主要用途</h3>
                <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
                    <div class="feature-card bg-white p-6 shadow-md">
                        <div class="feature-icon bg-indigo-100 text-indigo-600">
                            <i class="fas fa-user-check text-2xl"></i>
                        </div>
                        <h4 class="text-xl font-semibold mb-3 text-gray-800">身份验证</h4>
                        <p class="text-gray-600">在单点登录（SSO）场景中非常有用，允许用户在多个应用中只需登录一次。</p>
                    </div>
                    <div class="feature-card bg-white p-6 shadow-md">
                        <div class="feature-icon bg-purple-100 text-purple-600">
                            <i class="fas fa-lock text-2xl"></i>
                        </div>
                        <h4 class="text-xl font-semibold mb-3 text-gray-800">API访问控制</h4>
                        <p class="text-gray-600">在微服务架构中，各个服务可以验证JWT来决定是否允许访问。</p>
                    </div>
                    <div class="feature-card bg-white p-6 shadow-md">
                        <div class="feature-icon bg-green-100 text-green-600">
                            <i class="fas fa-exchange-alt text-2xl"></i>
                        </div>
                        <h4 class="text-xl font-semibold mb-3 text-gray-800">安全数据传输</h4>
                        <p class="text-gray-600">可以在不同系统之间安全地传输数据，确保信息没有被篡改。</p>
                    </div>
                    <div class="feature-card bg-white p-6 shadow-md">
                        <div class="feature-icon bg-red-100 text-red-600">
                            <i class="fas fa-shield-alt text-2xl"></i>
                        </div>
                        <h4 class="text-xl font-semibold mb-3 text-gray-800">防止CSRF攻击</h4>
                        <p class="text-gray-600">JWT通常存储在HTTP头部而非Cookie中，有效减少CSRF攻击风险。</p>
                    </div>
                    <div class="feature-card bg-white p-6 shadow-md">
                        <div class="feature-icon bg-yellow-100 text-yellow-600">
                            <i class="fas fa-key text-2xl"></i>
                        </div>
                        <h4 class="text-xl font-semibold mb-3 text-gray-800">第三方授权</h4>
                        <p class="text-gray-600">在OAuth 2.0和OpenID Connect中被广泛使用，简化第三方应用集成。</p>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- JWT Structure Section -->
    <section id="structure" class="py-16 px-4 sm:px-6 lg:px-8 bg-gray-50">
        <div class="max-w-4xl mx-auto">
            <h2 class="text-3xl font-bold mb-12 text-gray-800 border-b-2 border-indigo-100 pb-4">JWT的结构</h2>
            
            <div class="mb-12">
                <img src="https://cdn.nlark.com/yuque/0/2024/png/21449790/1718792670609-684386ab-d90a-4cbf-a679-89b8145ca510.png" alt="JWT Structure" class="w-full rounded-lg shadow-md mb-8">
                
                <p class="text-lg text-gray-700 mb-8">
                    JWT由三部分组成：Header（头部）、Payload（负载）和Signature（签名）。每一部分都有其特定的功能和意义，共同构成了一个完整且安全的令牌机制。
                </p>
                
                <div class="grid md:grid-cols-3 gap-6 mb-12">
                    <div class="jwt-part jwt-part-header">
                        <div class="flex items-center mb-4">
                            <div class="w-10 h-10 rounded-full bg-indigo-100 text-indigo-600 flex items-center justify-center mr-3">
                                <i class="fas fa-heading"></i>
                            </div>
                            <h3 class="text-xl font-semibold">Header</h3>
                        </div>
                        <p class="text-gray-700 mb-4">描述令牌的元数据，包括令牌类型和签名算法。</p>
                        <div class="code-block">
                            <pre><code class="language-json">{
  "alg": "HS256",
  "typ": "JWT"
}</code></pre>
                        </div>
                    </div>
                    
                    <div class="jwt-part jwt-part-payload">
                        <div class="flex items-center mb-4">
                            <div class="w-10 h-10 rounded-full bg-purple-100 text-purple-600 flex items-center justify-center mr-3">
                                <i class="fas fa-database"></i>
                            </div>
                            <h3 class="text-xl font-semibold">Payload</h3>
                        </div>
                        <p class="text-gray-700 mb-4">包含关于用户或其他实体的声明(claims)。</p>
                        <div class="code-block">
                            <pre><code class="language-json">{
  "sub": "1234567890",
  "name": "John Doe",
  "admin": true
}</code></pre>
                        </div>
                    </div>
                    
                    <div class="jwt-part jwt-part-signature">
                        <div class="flex items-center mb-4">
                            <div class="w-10 h-10 rounded-full bg-green-100 text-green-600 flex items-center justify-center mr-3">
                                <i class="fas fa-signature"></i>
                            </div>
                            <h3 class="text-xl font-semibold">Signature</h3>
                        </div>
                        <p class="text-gray-700 mb-4">验证消息在传输过程中没有被篡改。</p>
                        <div class="code-block">
                            <pre><code class="language-javascript">HMACSHA256(
  base64UrlEncode(header) + "." +
  base64UrlEncode(payload),
  secret
)</code></pre>
                        </div>
                    </div>
                </div>
                
                <div class="bg-white p-6 rounded-xl shadow-md">
                    <h3 class="text-xl font-semibold mb-4 text-gray-800">完整的JWT示例</h3>
                    <p class="text-gray-700 mb-4">JWT是将上述三部分用"."分隔符连接起来的字符串：</p>
                    <div class="code-block">
                        <pre><code class="language-plaintext">eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkpvaG4gRG9lIiwiaWF0IjoxNTE2MjM5MDIyfQ.SflKxwRJSMeKKF2QT4fwpMeJf36POk6yJV_adQssw5c</code></pre>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- How JWT Works Section -->
    <section class="py-16 px-4 sm:px-6 lg:px-8 bg-white">
        <div class="max-w-4xl mx-auto">
            <h2 class="text-3xl font-bold mb-12 text-gray-800 border-b-2 border-indigo-100 pb-4">JWT的工作原理</h2>
            
            <img src="https://cdn.nlark.com/yuque/0/2024/png/21449790/1718792733466-545870f8-ad3a-45c1-937b-657fc8db5440.png" alt="JWT Flow" class="w-full rounded-lg shadow-md mb-12">
            
            <div class="grid md:grid-cols-2 gap-8 mb-12">
                <div>
                    <h3 class="text-2xl font-semibold mb-6 text-gray-800">JWT生成流程</h3>
                    <div class="space-y-6">
                        <div class="flex items-start">
                            <div class="flex-shrink-0 bg-indigo-100 text-indigo-600 rounded-full w-8 h-8 flex items-center justify-center mr-4 mt-1">
                                1
                            </div>
                            <div>
                                <h4 class="text-lg font-medium text-gray-800 mb-2">用户认证</h4>
                                <p class="text-gray-700">用户提供凭证（如用户名密码）进行登录认证</p>
                            </div>
                        </div>
                        <div class="flex items-start">
                            <div class="flex-shrink-0 bg-indigo-100 text-indigo-600 rounded-full w-8 h-8 flex items-center justify-center mr-4 mt-1">
                                2
                            </div>
                            <div>
                                <h4 class="text-lg font-medium text-gray-800 mb-2">生成JWT</h4>
                                <p class="text-gray-700">服务器验证凭证后，创建Header和Payload，使用密钥生成签名</p>
                            </div>
                        </div>
                        <div class="flex items-start">
                            <div class="flex-shrink-0 bg-indigo-100 text-indigo-600 rounded-full w-8 h-8 flex items-center justify-center mr-4 mt-1">
                                3
                            </div>
                            <div>
                                <h4 class="text-lg font-medium text-gray-800 mb-2">返回JWT</h4>
                                <p class="text-gray-700">服务器将生成的JWT返回给客户端，客户端存储JWT</p>
                            </div>
                        </div>
                    </div>
                </div>
                
                <div>
                    <h3 class="text-2xl font-semibold mb-6 text-gray-800">JWT验证流程</h3>
                    <div class="space-y-6">
                        <div class="flex items-start">
                            <div class="flex-shrink-0 bg-purple-100 text-purple-600 rounded-full w-8 h-8 flex items-center justify-center mr-4 mt-1">
                                1
                            </div>
                            <div>
                                <h4 class="text-lg font-medium text-gray-800 mb-2">提取JWT</h4>
                                <p class="text-gray-700">从请求中提取JWT（通常在Authorization头部）</p>
                            </div>
                        </div>
                        <div class="flex items-start">
                            <div class="flex-shrink-0 bg-purple-100 text-purple-600 rounded-full w-8 h-8 flex items-center justify-center mr-4 mt-1">
                                2
                            </div>
                            <div>
                                <h4 class="text-lg font-medium text-gray-800 mb-2">验证签名</h4>
                                <p class="text-gray-700">使用相同的算法和密钥验证签名是否有效</p>
                            </div>
                        </div>
                        <div class="flex items-start">
                            <div class="flex-shrink-0 bg-purple-100 text-purple-600 rounded-full w-8 h-8 flex items-center justify-center mr-4 mt-1">
                                3
                            </div>
                            <div>
                                <h4 class="text-lg font-medium text-gray-800 mb-2">验证声明</h4>
                                <p class="text-gray-700">检查JWT中的声明是否满足要求（如过期时间等）</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
            <div class="bg-yellow-50 border-l-4 border-yellow-400 p-6 rounded-r-lg mb-12">
                <div class="flex">
                    <div class="flex-shrink-0 text-yellow-500">
                        <i class="fas fa-exclamation-circle text-xl"></i>
                    </div>
                    <div class="ml-3">
                        <h3 class="text-lg font-medium text-yellow-800">安全注意事项</h3>
                        <div class="mt-2 text-yellow-700">
                            <ul class="list-disc pl-5 space-y-1">
                                <li>避免在JWT中存储敏感信息</li>
                                <li>合理设置JWT的过期时间</li>
                                <li>保证签名密钥的安全存储和管理</li>
                                <li>考虑使用HTTPS传输JWT</li>
                                <li>防范XSS攻击（避免将JWT存储在可被JS访问的地方）</li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
            
            <div class="mermaid">
                sequenceDiagram
                    participant Client
                    participant Server
                    Client->>Server: 登录请求(用户名/密码)
                    Server->>Server: 验证凭证
                    Server->>Client: 返回JWT
                    Client->>Server: 请求资源(携带JWT)
                    Server->>Server: 验证JWT签名和声明
                    Server->>Client: 返回请求的资源
            </div>
        </div>
    </section>

    <!-- JWT Algorithms Section -->
    <section class="py-16 px-4 sm:px-6 lg:px-8 bg-gray-50">
        <div class="max-w-4xl mx-auto">
            <h2 class="text-3xl font-bold mb-12 text-gray-800 border-b-2 border-indigo-100 pb-4">JWT签名算法</h2>
            
            <p class="text-lg text-gray-700 mb-8">
                JWT支持多种签名算法，选择合适的算法取决于安全性需求和应用场景。以下是四种常见的JWT签名算法及其特点。
            </p>
            
            <div class="grid md:grid-cols-2 gap-8 mb-12">
                <div class="bg-white p-6 rounded-xl shadow-md">
                    <div class="flex items-center mb-4">
                        <div class="w-12 h-12 rounded-full bg-blue-100 text-blue-600 flex items-center justify-center mr-4">
                            <i class="fas fa-lock text-xl"></i>
                        </div>
                        <h3 class="text-xl font-semibold">HMAC算法</h3>
                    </div>
                    <div class="space-y-4">
                        <div>
                            <h4 class="font-medium text-gray-800 mb-1">算法示例</h4>
                            <p class="text-gray-700">HS256, HS384, HS512</p>
                        </div>
                        <div>
                            <h4 class="font-medium text-gray-800 mb-1">安全性</h4>
                            <p class="text-gray-700">基于哈希函数和秘密密钥，保证数据完整性和真实性</p>
                        </div>
                        <div>
                            <h4 class="font-medium text-gray-800 mb-1">适用场景</h4>
                            <p class="text-gray-700">对称加密场景，服务端和客户端共享同一个密钥</p>
                        </div>
                    </div>
                </div>
                
                <div class="bg-white p-6 rounded-xl shadow-md">
                    <div class="flex items-center mb-4">
                        <div class="w-12 h-12 rounded-full bg-purple-100 text-purple-600 flex items-center justify-center mr-4">
                            <i class="fas fa-key text-xl"></i>
                        </div>
                        <h3 class="text-xl font-semibold">RSA算法</h3>
                    </div>
                    <div class="space-y-4">
                        <div>
                            <h4 class="font-medium text-gray-800 mb-1">算法示例</h4>
                            <p class="text-gray-700">RS256, RS384, RS512</p>
                        </div>
                        <div>
                            <h4 class="font-medium text-gray-800 mb-1">安全性</h4>
                            <p class="text-gray-700">非对称加密，私钥签名，公钥验证</p>
                        </div>
                        <div>
                            <h4 class="font-medium text-gray-800 mb-1">适用场景</h4>
                            <p class="text-gray-700">需要高安全性的场景，如OAuth 2.0和OpenID Connect</p>
                        </div>
                    </div>
                </div>
                
                <div class="bg-white p-6 rounded-xl shadow-md">
                    <div class="flex items-center mb-4">
                        <div class="w-12 h-12 rounded-full bg-green-100 text-green-600 flex items-center justify-center mr-4">
                            <i class="fas fa-project-diagram text-xl"></i>
                        </div>
                        <h3 class="text-xl font-semibold">ECDSA算法</h3>
                    </div>
                    <div class="space-y-4">
                        <div>
                            <h4 class="font-medium text-gray-800 mb-1">算法示例</h4>
                            <p class="text-gray-700">ES256, ES384, ES512</p>
                        </div>
                        <div>
                            <h4 class="font-medium text-gray-800 mb-1">安全性</h4>
                            <p class="text-gray-700">类似RSA的安全性，但使用更短的密钥长度</p>
                        </div>
                        <div>
                            <h4 class="font-medium text-gray-800 mb-1">适用场景</h4>
                            <p class="text-gray-700">对安全性要求高又需要良好性能的场景</p>
                        </div>
                    </div>
                </div>
                
                <div class="bg-white p-6 rounded-xl shadow-md">
                    <div class="flex items-center mb-4">
                        <div class="w-12 h-12 rounded-full bg-red-100 text-red-600 flex items-center justify-center mr-4">
                            <i class="fas fa-shield-alt text-xl"></i>
                        </div>
                        <h3 class="text-xl font-semibold">EdDSA算法</h3>
                    </div>
                    <div class="space-y-4">
                        <div>
                            <h4 class="font-medium text-gray-800 mb-1">算法示例</h4>
                            <p class="text-gray-700">EdDSA</p>
                        </div>
                        <div>
                            <h4 class="font-medium text-gray-800 mb-1">安全性</h4>
                            <p class="text-gray-700">高安全性，不易受侧信道攻击</p>
                        </div>
                        <div>
                            <h4 class="font-medium text-gray-800 mb-1">适用场景</h4>
                            <p class="text-gray-700">需要高安全性且对性能有要求的场景</p>
                        </div>
                    </div>
                </div>
            </div>
            
            <div class="bg-white p-6 rounded-xl shadow-md">
                <h3 class="text-xl font-semibold mb-4 text-gray-800">如何选择合适的算法</h3>
                <div class="overflow-x-auto">
                    <table class="min-w-full divide-y divide-gray-200">
                        <thead class="bg-gray-50">
                            <tr>
                                <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">考虑因素</th>
                                <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">推荐算法</th>
                            </tr>
                        </thead>
                        <tbody class="bg-white divide-y divide-gray-200">
                            <tr>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-700">最高安全性需求</td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">RSA或EdDSA</td>
                            </tr>
                            <tr>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-700">性能和安全性平衡</td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">ECDSA</td>
                            </tr>
                            <tr>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-700">简单共享密钥场景</td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">HMAC</td>
                            </tr>
                            <tr>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-700">微服务间通信</td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">RSA或ECDSA</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </section>

    <!-- JWT Use Cases Section -->
    <section class="py-16 px-4 sm:px-6 lg:px-8 bg-white">
        <div class="max-w-4xl mx-auto">
            <h2 class="text-3xl font-bold mb-12 text-gray-800 border-b-2 border-indigo-100 pb-4">JWT使用场景</h2>
            
            <div class="mb-12">
                <div class="flex items-start">
                    <div class="flex-shrink-0 bg-indigo-100 text-indigo-600 rounded-lg p-4 mr-6">
                        <i class="fas fa-user-check text-2xl"></i>
                    </div>
                    <div>
                        <h3 class="text-2xl font-semibold mb-4 text-gray-800">1. 身份认证 (Authentication)</h3>
                        <p class="text-gray-700 mb-6">
                            JWT最常见的用途之一是作为身份认证机制，取代了传统的Session和Cookie机制。在微服务架构中，不同的服务可能由不同的团队开发和管理，JWT可以用作跨服务的认证方式，每个服务都可以验证JWT来确定用户的身份和权限。
                        </p>
                        <div class="bg-gray-50 p-6 rounded-lg">
                            <h4 class="text-lg font-medium text-gray-800 mb-3">身份认证的优势</h4>
                            <ul class="list-disc pl-5 space-y-2 text-gray-700">
                                <li><strong>无状态：</strong>服务器不需要在后端存储会话信息</li>
                                <li><strong>分布式系统支持：</strong>适合微服务架构中的服务间通信</li>
                                <li><strong>安全性：</strong>签名保证了数据的完整性和真实性</li>
                                <li><strong>跨域支持：</strong>可以在不同域之间安全传递用户信息</li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
            
            <div class="mb-12">
                <div class="flex items-start">
                    <div class="flex-shrink-0 bg-purple-100 text-purple-600 rounded-lg p-4 mr-6">
                        <i class="fas fa-user-tag text-2xl"></i>
                    </div>
                    <div>
                        <h3 class="text-2xl font-semibold mb-4 text-gray-800">2. 授权 (Authorization)</h3>
                        <p class="text-gray-700 mb-6">
                            除了身份认证，JWT还可以用于授权访问特定资源。通过在Payload中加入特定的声明(claims)，可以实现对用户角色和权限的控制。
                        </p>
                        <div class="bg-gray-50 p-6 rounded-lg">
                            <h4 class="text-lg font-medium text-gray-800 mb-3">授权示例Payload</h4>
                            <div class="code-block">
                                <pre><code class="language-json">{
  "sub": "1234567890",
  "name": "John Doe",
  "roles": ["user", "admin"],
  "permissions": ["read", "write", "delete"]
}</code></pre>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
            <div>
                <div class="flex items-start">
                    <div class="flex-shrink-0 bg-green-100 text-green-600 rounded-lg p-4 mr-6">
                        <i class="fas fa-exchange-alt text-2xl"></i>
                    </div>
                    <div>
                        <h3 class="text-2xl font-semibold mb-4 text-gray-800">3. 信息交换 (Information Exchange)</h3>
                        <p class="text-gray-700">
                            JWT可以安全地在不同的系统之间传递信息，它提供了一种简单且安全的机制来传递声明性信息，例如用户身份和认证状态。在前后端分离的应用中，前端可以存储JWT，并在每个请求中发送JWT到后端，后端使用JWT来验证用户身份和权限。
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Footer -->
    <footer class="bg-gray-900 text-white py-12 px-4 sm:px-6 lg:px-8">
        <div class="max-w-4xl mx-auto">
            <div class="flex flex-col md:flex-row justify-between items-center">
                <div class="mb-6 md:mb-0">
                    <h3 class="text-xl font-semibold mb-2">技术小馆</h3>
                    <p class="text-gray-400">探索技术世界的知识宝库</p>
                </div>
                <div>
                    <a href="http://www.yuque.com/jtostring" class="text-gray-300 hover:text-white transition duration-300">
                        <i class="fas fa-link mr-2"></i> www.yuque.com/jtostring
                    </a>
                </div>
            </div>
        </div>
    </footer>

    <script>
        mermaid.initialize({
            startOnLoad: true,
            theme: 'default',
            flowchart: {
                useMaxWidth: false,
                htmlLabels: true,
                curve: 'basis'
            }
        });
        
        // 平滑滚动
        document.querySelectorAll('a[href^="#"]').forEach(anchor => {
            anchor.addEventListener('click', function (e) {
                e.preventDefault();
                document.querySelector(this.getAttribute('href')).scrollIntoView({
                    behavior: 'smooth'
                });
            });
        });
    </script>
</body>
</html>
```